<template>
  <div>
    <div v-show="!openDialog">
      <div class="text-right">
        <el-button size="large" type="primary" @click="openDialog = true">添加联系人</el-button>
      </div>

      <el-table :data="contackList" class="mt-5" border stripe style="width: 100%;">
        <!-- <el-table-column align="center" prop label="序号">

        </el-table-column> -->
        <el-table-column align="center" label="姓名" prop="contactName">

        </el-table-column>
        <el-table-column align="center" label="手机号" prop="contactTell">

        </el-table-column>
        <el-table-column align="center" label="手机号2" prop="contactPhone">

        </el-table-column>
        <el-table-column align="center" label="身份类型" prop="roleType" :formatter="(row) => {
          return contactTypeOPtions.find(item => item.value === row.roleType)?.label
        }">

        </el-table-column>
        <el-table-column label="操作" width="140" align="center" prop="actions">
          <template #default="scope">
            <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="delUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="openDialog">
      <el-form :model="form" :label-width="220">
        <el-form-item label="联系人类型：">
          <el-select size="large" v-model="form.roleType">
            <el-option v-for="item in contactTypeOPtions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系人姓名：">
          <el-input size="large" v-model="form.contactName" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号：">
          <el-input size="large" v-model="form.contactTell" placeholder="请输入联系人手机号"></el-input>
        </el-form-item>
        <el-form-item label="联系人2手机号：">
          <el-input size="large" v-model="form.contactPhone" placeholder="请输入联系人手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="w-full text-center">

            <el-button type="primary" size="large" @click="finishEnterpriseInfo" class="!text-4.5 w-70"> 保存
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useDict } from '@/hooks/dict';
import { addContact, delContact, getContactList } from '@/api/enterprise';
const openDialog = ref(false)
const { contactType: contactTypeOPtions } = useDict('contactType')
const route = useRoute()

// 联系人表单数据
const form = reactive({
  enterpriseId: route.query.id,
  contactName: '',
  contactTell: '',
  contactPhone: '',
  roleType: ''
})

onMounted(() => {
  loadContactList()
})

const contackList = ref([])
function loadContactList() {
  getContactList({
    enterpriseId: route.query.id
  }).then(response => {
    console.log('联系人列表:', response);
    contackList.value = response.rows || []
  }).catch(error => {
    console.error('获取联系人列表失败:', error);
  });
}

function delUser(id) {

  ElMessageBox.confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 删除联系人
    console.log('删除联系人ID:', id);
    if (!id) {
      ElMessage.error('联系人ID不能为空')
      return
    }

    delContact(id).then(response => {
      ElMessage.success('删除联系人成功')
      loadContactList()
    }).catch(error => {
      console.error('删除联系人失败:', error);
    });
  })

}

function editUser(row) {
  openDialog.value = true
  form.id = row.id
  form.contactName = row.contactName
  form.contactTell = row.contactTell
  form.contactPhone = row.contactPhone
  form.roleType = row.roleType
  form.enterpriseId = row.enterpriseId
}

function finishEnterpriseInfo() {
  console.log('form', form);
  addContact(form).then(response => {
    ElMessage.success(`${form.id ? '修改' : '添加'}联系人成功`)
    openDialog.value = false
    // 重置表单
    form.contactName = ''
    form.contactTell = ''
    form.contactPhone = ''
    form.roleType = ''
    form.id = null
    loadContactList()
  }).catch(error => {
    console.error('添加联系人失败:', error);
  });
}
</script>
<style lang="scss" scoped>
@use '@/assets/styles/el_form.scss'
</style>
